<template>
    <drop-wrap :data="data" :index="index"  :element="element">
      <div
        :class="{
          'card-wrap': true,
          'always-shadow': shadow !== 'hover' && shadow !== 'off',
          'hover-shadow': shadow === 'hover',
          'no-shadow': shadow === 'off',
        }"
      >
        <draggable
          v-model="element.columns"
          :no-transition-on-drag="true"
          v-bind="{
            group: 'site',
            ghostClass: 'ghost',
            animation: 200,
            handle: '.mover',
          }"
          @add="handleContainerAdd($event)"
        >
          <transition-group
            name="fade"
            tag="div"
            v-drop-blank
            :class="[
              'blank-container',
              element.options.className ? element.options.className : '',
            ]"
            :style="style"
          >
            <widget
              v-for="(el, i) in element.columns"
              :element="el"
              :index="i"
              :key="el.key"
              :data.sync="element.columns"
            ></widget>
          </transition-group>
        </draggable>
      </div>
    </drop-wrap>
</template>

<script>
import clone from 'clone'
import Draggable from 'vuedraggable'
export default {
  props: ['element', 'data', 'index'],
  data() {
    return {
      shadow: 'on',
    }
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
    style() {
      let boxModel = {}
      Object.entries(this.element.boxModelStyle).map((item) => {
        boxModel[item[0]] = item[1] + 'px'
      })
      return {
        ...boxModel,
      }
    },
  },
  components: { Draggable },
  methods: {
    handleContainerAdd(evt) {
      const newIndex = evt.newIndex
      const to = evt.to
      console.log(to)

      console.log('需要删除的key', this.element.columns[newIndex].key)
      if (this.element.columns[newIndex].key) {
        this.store.delComponentMap(this.element.columns[newIndex])
      }
      this.$set(
        this.element.columns,
        newIndex,
        this.store.generateComponent({
          ...clone(this.element.columns[newIndex]),
        })
      )
      this.store.current = this.element.columns[newIndex]
      this.$handleStack.push(clone(this.store.root))
    },
  },
}
</script>

<style lang="scss" scoped>
.blank-container {
  min-height: 20px;
}

/* 卡片-圆角弧度 */
$cardWrap-radius: 4px;
/* 卡片-颜色 */
$cardWrap-backgroundColor: #fff;
/* 卡片-阴影 */
$cardWrap-shadow: 0px 0px 6px rgba(5, 1, 1, 0.1);
/* 卡片-margin */
$cardWrap-margin: 5px 15px;
/* 卡片-头部-圆角弧度 */
$cardWrap-header-radius: 4px 4px 0px 0px;
/* 卡片-头部-下边线颜色 */
$cardWrap-header--borderColor: #dcdcdc;
/* 卡片-头部-文字颜色 */
$cardWrap-header--fontColor: #2f2f2f;
/* 卡片-头部-文字颜色-辅助 */
$cardWrap-header--fontSubColor: #999;
/* 卡片-头部-icon颜色 */
$cardWrap-header-LineColor: #0084ff;

.card-wrap {
  position: relative;
  border-radius: $cardWrap-radius;
  background-color: $cardWrap-backgroundColor;
  margin: $cardWrap-margin;
  padding: 10px;
}
.always-shadow {
  box-shadow: $cardWrap-shadow;
}
.hover-shadow:hover {
  box-shadow: $cardWrap-shadow;
}
</style>
